<template>
  <div>
    <!-- 场站预警 2018/8/15 zhangQ -->
    <Row>
      <i-col>
        <Form ref="stationTabParam" :model="stationTabParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="场站">
                <!--<Select v-model="stationTabParam.stationName" clearable placeholder="请选择场站站点" style="width: 200px" filterable clearable>-->
                <!--<template v-for="item in stationPositionList">-->
                <!--<Option :value="item">{{ item }}</Option>-->
                <!--</template>-->
                <!--</Select>-->
                <selectAuto
                  v-model="stationTabParam.stationName" field="stationName" label="stationName" search-keys="stationName,py" :dataList="stationCodesDict" :dropAll="true" :width="200"></selectAuto>
              </FormItem>
              <!--<FormItem label="预警">-->
              <!--<Select v-model="stationTabParam.warning" clearable placeholder="请选择" style="width: 200px">-->
              <!--<template v-for="item in warningLevels">-->
              <!--<Option :value="item.id">{{ item.label }}</Option>-->
              <!--</template>-->
              <!--</Select>-->
              <!--</FormItem>-->
              <FormItem style="float:right;">
                <Button type="primary" @click="overQuantitySearch" icon="ios-search">
                  搜索
                </Button>
                <Button type="primary" @click="exportExcel">
                  导出excel
                </Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>
    <tablePage ref="overQuantityPageRef" :api="getStationOverbalanceWarningList" :param="stationTabParam" v-if="tabs=='1'" showSizer :pageSizeOpts="[100,200,500]">
      <template slot-scope="props">
        <Table ref="overQuantityTabRef" :columns="overQuantityWarning.columns" border :data="props.data" :height="550" :row-class-name="overQuantityTabClassName"></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="operaModal.containerDetailShow" title="集装箱详情" width="960">
      <containerDetails :stationQuantityWarningInfo="stationQuantityWarningInfo" v-if="operaModal.containerDetailShow"></containerDetails>
    </xlinkModal>

    <!--<xlinkModal v-model="operaModal.containerTypeStaticsShow" title="箱型统计" width="960">-->
    <!--<containerTypeStatics :stationQuantityWarningInfo="stationQuantityWarningInfo" v-if="operaModal.containerTypeStaticsShow"></containerTypeStatics>-->
    <!--</xlinkModal>-->
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getStationWarningList, getWayContainersList, getStationOverbalanceWarningList } from '@api/containerPlatform/containerManagement'
  import selectAuto from '@/components/selectAuto'
  import xlinkModal from '@components/modal/xlinkModal'
  import containerDetails from './containerDetails'
  import containerTypeStatics from './containerTypeStatics'
  import containerDictMixins from '../../containerDictMixins'
  import { exportExcelCommon } from '@/api/common'

  export default {
    name: 'stationQuantityWarning',
    mixins: [containerDictMixins],
    data () {
      let tabs = '1'
      let operaModal = { containerDetailShow: false, containerTypeStaticsShow: false }
      let stationQuantityWarningInfo = null
      let overQuantityWarning = {
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            title: '场站',
            key: 'stationName',
            align: 'center',
            width: 200
          },
          {
            title: '箱数',
            align: 'center',
            width: 100,
            children:
              [
                {
                  title: '空',
                  key: 'containerNowEmptyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '重',
                  key: 'containerNowHeavyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '总',
                  key: 'containerNowTotalCount',
                  align: 'center',
                  width: 100
                }
              ]
          },
          {
            title: '敞顶箱',
            align: 'center',
            children:
              [
                {
                  title: '空',
                  key: 'containerOpenEmptyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '重',
                  key: 'containerOpenHeavyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '总',
                  key: 'containerOpenTotalCount',
                  align: 'center',
                  width: 100
                }
              ]
          },
          {
            title: '在途',
            align: 'center',
            key: 'containerTotalCount',
            children:
              [
                {
                  title: '空',
                  key: 'containerOnWayEmptyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '重',
                  key: 'containerOnWayHeavyCount',
                  align: 'center',
                  width: 100
                },
                {
                  title: '总',
                  key: 'containerOnWayTotalCount',
                  align: 'center',
                  width: 100
                }
              ]
          },
          {
            title: '总数',
            width: 100,
            key: 'containerAllTotalCount'
            // render: (h, params) => {
            //   // 站内重箱+站内空箱'containerTotalCount - containerNowEmptyCount-containerNowHeavyCount
            //   let count = params.row.containerTotalCount - params.row.containerNowEmptyCount - params.row.containerNowHeavyCount
            //   return (<span>{count}</span>)
            // }
          },
          {
            title: '保有能力',
            width: 100,
            key: 'containerTotalCount'
            // render: (h, params) => {
            //   // 站内重箱+站内空箱'containerTotalCount - containerNowEmptyCount-containerNowHeavyCount
            //   let count = params.row.containerNowEmptyCount + params.row.containerNowHeavyCount
            //   return (<span>{count}</span>)
            // }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            minWidth: 270,
            fixed: 'right',
            render: (h, params) => {
              let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => {
                this.stationQuantityWarningInfo = params.row
                this.operaModal.containerDetailShow = true
              }}>集装箱箱情</i-button>)
              return viewDetailBtn
            }
          }
        ]
      }
      let stationTabParam = { stationName: '', warning: '' }
      let containerStateList = [{ id: 1, state: '运输中' }, { id: 2, state: '站内' }]
      let stationPositionList = []
      let warningLevels = [{ id: 1, label: '超量' }, { id: 0, label: '未超量' }]
      let datas = { operaModal, stationTabParam, overQuantityWarning, containerStateList, warningLevels, stationPositionList, getStationWarningList, tabs, getWayContainersList, stationQuantityWarningInfo, getStationOverbalanceWarningList }
      return datas
    },
    computed: {},
    watch: {
      'operaModal.containerDetailShow' (val, oldval) {
        if (!val) {
          this.stationQuantityWarningInfo = null
        }
      },
      'operaModal.containerTypeStaticsShow' (val, oldval) {
        if (!val) {
          this.stationQuantityWarningInfo = null
        }
      }
    },
    methods: {
      overQuantityTabClassName (row, index) {
        if (!(row.containerAllTotalCount >= 0 && row.containerTotalCount >= 0)) {
          return ''
        }
        if (+row.containerAllTotalCount > +row.containerTotalCount) {
          return 'rowRed'
        } else {
          return ''
        }
      },
      /**
       * TODO(导出excel)
       * @auther zhangQ
       * @date 2018/9/4 12:16
       */
      exportExcel () {
        let param = Object.assign({}, this.stationTabParam)
        param.page = 1
        param.pageSize = 0
        getStationOverbalanceWarningList(param)
          .then(res => {
            if (+res.data.isSuccess === 1) {
              let datas = res.data.data.rows
              let index = 1
              datas.forEach((item) => {
                item.index = index
                index++
              })
              exportExcelCommon({ list: datas, map: { templateName: 'stationQuantityWarning', fileName: '超量预警' + Date.now() } })
                .then(res1 => {
                  this.download(res1.data, '超量预警' + Date.now())
                })
            }
          })
      },
      download (data, filename) {
        if (!data) {
          return
        }
        let blob = new Blob([data], { type: 'application/ms-excel' })
        let fileName = filename + '.xlsx'
        if ('download' in document.createElement('a')) { // 非ie下载
          let eLink = document.createElement('a')
          eLink.download = fileName
          eLink.style.display = 'none'
          eLink.href = URL.createObjectURL(blob)
          document.body.appendChild(eLink)
          eLink.click()
          URL.revokeObjectURL(eLink.href)
          document.body.removeChild(eLink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      },
      containerDetailsOpen (row) {
        this.stationQuantityWarningInfo = row
        this.operaModal.containerDetailShow = true
      },
      containerTypeStaticsOpen (row) {
        this.stationQuantityWarningInfo = row
        this.operaModal.containerTypeStaticsShow = true
      },
      /**
       * TODO(搜索)
       * @auther zhangQ
       * @date 2018/8/14 16:19
       */
      overQuantitySearch (param) {
        this.$refs['overQuantityPageRef'].dataRefresh(this.stationTabParam)
      },
      getData () {
        // getContainersPositionList({ isAll: 0 }).then(res => {
        //   if (res.data.isSuccess === 1) {
        //     this.stationPositionList = res.data.data
        //   }
        // })
        // getContainersTypeList()
        //   .then(res => {
        //     if (res.data.isSuccess === 1) {
        //       this.containerTypeList = res.data.data
        //     }
        //   })
      }
    },
    created () {
    },
    mounted () {
      this.getContainersPositionListDB()
    },
    components: { tablePage, xlinkModal, containerDetails, containerTypeStatics, selectAuto }
  }
</script>

<style>
  .rowRed {
    color: red;
  }
</style>
